<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-07-17 17:58:47
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-17 18:10:34
 * @Description:
 *
-->

<template>
  <el-dialog
    class="advanced-search-dialog"
    title="高级搜索"
    :visible="show"
    width="600px"
    top="15vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <div class="wrapper">
      <el-row type="flex" align="middle">
        <el-select v-model="searchKey1" placeholder="请选择" style="width: 33%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :disabled="item.value === searchKey2 || item.value === searchKey3"
          >{{ item.label }}</el-option>
        </el-select>
        <el-input
          v-model="searchValue1"
          style="width: 65%; margin-left: auto"
          placeholder="请输入关键词进行过滤"
        />
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 20px">
        <el-select v-model="searchKey2" placeholder="请选择" style="width: 33%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :disabled="item.value === searchKey1 || item.value === searchKey3"
          >{{ item.label }}</el-option>
        </el-select>
        <el-input
          v-model="searchValue2"
          style="width: 65%; margin-left: auto"
          placeholder="请输入关键词进行过滤"
        />
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 20px">
        <el-select v-model="searchKey3" placeholder="请选择" style="width: 33%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :disabled="item.value === searchKey2 || item.value === searchKey1"
          >{{ item.label }}</el-option>
        </el-select>
        <el-input
          v-model="searchValue3"
          style="width: 65%; margin-left: auto"
          placeholder="请输入关键词进行过滤"
        />
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="resetClick">重置</el-button>
      <el-button
        type="primary"
        size="small"
        :loading="confirmLoading"
        @click="confirmClick"
      >查询</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AdvancedSearchDialog',
  components: {},
  mixins: [],
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    },
    defaultKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      confirmLoading: false,
      searchKey1: '',
      searchValue1: '',
      searchKey2: '',
      searchValue2: '',
      searchKey3: '',
      searchValue3: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.init()
  },
  methods: {
    /**
     * @description: 初始化
     * @return {*}
     */
    init() {
      this.clear()
    },
    /**
     * @description: 清除
     * @return {*}
     */
    clear() {
      this.searchKey1 = this.defaultKeys.length > 0 ? this.defaultKeys[0] : ''
      this.searchValue1 = ''
      this.searchKey2 = this.defaultKeys.length > 1 ? this.defaultKeys[1] : ''
      this.searchValue2 = ''
      this.searchKey3 = this.defaultKeys.length > 2 ? this.defaultKeys[2] : ''
      this.searchValue3 = ''
    },
    /**
     * @description:
     * @return {*}
     */
    resetClick() {
      this.clear()
      this.confirmClick()
    },
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      const data = {}
      if (this.searchValue1 !== '') {
        data[this.searchKey1] = this.searchValue1
      }
      if (this.searchValue2 !== '') {
        data[this.searchKey2] = this.searchValue2
      }
      if (this.searchValue3 !== '') {
        data[this.searchKey3] = this.searchValue3
      }
      this.$emit('confirm', data)
      this.closeClick()
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.advanced-search-dialog {
}
</style>
